<template>
  <div>
    <h1>v-model:钱数{{ money }}</h1>
    <h1>pageNo {{pageNo}}</h1>
    <h1>pageSize {{pageSize}}</h1>
    <input type="text" v-model="info" />
    <hr />
    <!-- props:父亲给儿子数据 -->
    <!-- <Child :modelValue="money" @update:modelValue="handler"></Child> -->
    <!-- 
       v-model组件身上使用
       第一:相当有给子组件传递props[modelValue] = 10000
       第二:相当于给子组件绑定自定义事件update:modelValue
       第三:相当于给父组件绑定了一个回调函数(如果自己不定义的话),这个回调函数等于赋值操作
     -->
    <Child v-model="money"></Child>
    <hr />
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
    <hr />
    <h1>SynInput Without Vue use</h1>
    <h3>synTextString modelValue Demo</h3>
     <SynInput v-model="synTextString"  v-model:namedText="synTextStringNamed" style="display: inline-block;"/>
     <b>synTextString = {{ synTextString }}</b>
     <b>synTextStringNamed = {{ synTextStringNamed }}</b>
     <hr />
    <h1>SynInput With Vue use</h1>
    <SynInputVueUse v-model="synTextString" v-model:namedText="synTextStringNamed" style="display: inline-block;"/>
     <b>synTextString = {{ synTextString }}</b>
     <b>synTextStringNamed = {{ synTextStringNamed }}</b>
  </div>
</template>

<script setup lang="ts">
//v-model指令:收集表单数据,数据双向绑定
//v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据 props
//子组件给父组件数据 自定义事件
//引入子组件
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
import {ref} from 'vue'
import SynInput from "./SynInput.vue";
import SynInputVueUse from "./SynInputVueUse.vue";
let info = ref("");
//父组件的数据钱数
let money = ref(10000);
//自定义事件的回调
const handler = (num) => {
  //将来接受子组件传递过来的数据
  money.value = num;
};
const synTextString=ref('syn text')
const synTextStringNamed=ref('syn text named')
//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script>

<style  scoped>
b{
  display: inline-block;
  margin: 20px;
}
</style>
<style>
input{
  margin: 20px;
}
</style>